<template>
    <view class="container">
        <div class="body">
            <h1 id="welcomeWord">指望&nbsp;&nbsp;让你有所指望</h1>
        </div>


        <div class="footer" @animationend="onMoveAppearEnd">
            <image id="logo" :src="imgUrl"></image>
            <span id="logoText">Zwart</span>
        </div>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imgUrl: '',
                fit: 'fill'
            }
        },

        mounted() {
            this.loadImage('/static/img/logo.png');
        },

        methods: {
            loadImage(url) {
                // 使用uni-app的API来处理图片（base64）
                uni.getImageInfo({
                    src: url,
                    success: (info) => {
                        // 获取图片信息成功后，将图片路径赋值给imgUrl
                        this.imgUrl = info.path;
                    },
                    fail: (err) => {
                        console.error('Failed to get image info:', err);
                    }
                });
            },
            onMoveAppearEnd() {
                console.log('moveAppear animation ended');
                uni.navigateTo({
                    url: "/pages/task/task"
                });
            }
        }
    }
</script>

<style>
    .body {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        text-align: center;
        position: absolute;
        top: 30%;
    }

    #welcomeWord {
        font-size: 9vw;
        font-weight: bold;
        color: #ffffff;
        text-shadow: 2px 2px 2px #86797a;
        margin: 0; /* 移除h1默认的外边距 */

        opacity: 0; /* 初始状态完全透明 */
        animation: fadeIn 1s forwards; /* 动画名称，持续时间，保持最后一帧的状态 */
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .footer {
        position: absolute;
        bottom: 5vh;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        animation: moveAppear 1s forwards; /* 动画名称，持续时间，保持最后一帧的状态 */
    }

    @keyframes moveAppear {
        0% {
            bottom: -100%;
        }
        50% {
            bottom: 5vh;
        }
        60% {
            bottom: 3vh;
        }
        70% {
            bottom: 5vh;
        }
        100% {
            bottom: 5vh;
        }
    }

    #logo {
        width: 10vw;
        height: 10vw;
    }

    #logoText {
        font-size: 7vw;
        color: #ffffff;
        margin-left: 3%;
        font-weight: bold;
        text-shadow: 1px 1px 1px #b9b3b3;

    }


</style>
